<template>
  <div class="app-wrapper">
  <div class="el-col el-col-5 height100" v-loading="loading">
    <div slot="header" class="clearfix tree-title">
      <span style="float: left;line-height: 30px">岗位管理</span>
    </div>
    <div class="tree-detail">
      <div class="block">
        <el-tree
          :data="treeData"
          :props="defaultProps"
          node-key="id"
          @click="check(data)"
          @node-click="check"
          :expand-on-click-node="false">
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>{{ data.name }}</span>
          </span>
        </el-tree>
      </div>
    </div>
  </div>
  <div v-if="sidebar == true" class="el-col el-col-19 height100" v-loading="loading2">
    <Job :orgid="orgid"/>
  </div>
  </div>
  <!-- 组织机构树 -->
</template>

<script>
  import '@/styles/newstyle.scss'
  import Job from './components/job'
  const defaultSelectlist = {
    'condition': [],
    'sort': [
      {
        direction: 'DESC',
        property: 'fcTime'
      }
    ]
  }
  export default {
    components: {
      Job
    },
    data() {
      return {
        Department: Object.assign({}, defaultSelectlist),
        loading: false,
        loading2: false,
        sidebar: false,
        dappendVisible: false,
        orgTree: {},
        treeData: [],
        defaultProps: {
          children: 'children',
          label: 'title'
        },
        orgid: '',
        subsys: {},
        deletelist: {},
        MenuTree: {}
      }
    },
    created() {
      this.fetchData()
    },
    watch: {
      asyncData() { // 普通的watch监听
        this.fetchData()
        // console.log(this.asyncData)
      },
      // 如果路由有变化，会再次执行该方法
      '$route.name': ['fetchData']
    },
    // 画面刚进入method
    mounted() {
      // this.handleReset()
    },
    methods: {
      fetchData() {
        this.loading = true
        this.orgTree.id = this.$store.getters.orgId
        this.orgTree.status = '0,1'
        this.$store.dispatch('OrgTree', this.orgTree).then(res => {
          this.treeData = res.data
          this.loading = false
        }).catch((err) => {
          console.log(err)
        })
      },
      check(data) {
        if (data.id) {
          this.sidebar = true
          this.orgid = data.id
        } else {
          this.sidebar = false
        }
        // console.log(data)
      }
    }
  }
</script>
<style scoped>
  .app-wrapper {
    position: relative;
    height: 100%;
    width: 100%;
  }
  .tree-title{
    font-size: 16px;
    padding:10px 10px 5px 10px;
    border-bottom: 1px solid #ccc;
  }
  .size{
    padding:6px;
  }
  .tree-detail{
    padding: 10px 0
  }
  .minSize{
    padding:4px;
  }
  .height100{
    border-right: 1px solid #ccc;
    overflow-y: auto;
  }
</style>
<style scoped>
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both;
  }
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
</style>
